<template>
  <div class="global-loading" v-if="isVisible">
    <div class="global-loading-cont">
      <img src="~@/assets/imgs/loading.png" alt="">
    </div>
    <!-- <img class="global-loading-img" src="/static/global-loading.gif" alt=""> -->
  </div>
</template>

<script>
export default {
  name: 'GlobalLoading',
  data () {
    return {
      isVisible: false
    }
  },
  methods: {
    open () {
      this.isVisible = true
    },
    close () {
      this.isVisible = false
    }
  }
}
</script>

<style lang='scss'>
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  &-cont {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 48px;
    border-radius: 32px;
    background-color: rgba(#000, .75);
    transform: translate(-50%, -50%);
    & > img {
      width: 96px;
      height: 96px;
      animation: loading 1s linear infinite;
    }
  }
}
@keyframes loading {
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(-360deg);
  }
}
</style>